<!--
滨江高压氧治疗的心理护理及安全告知书
-->

<template>
  <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="80px" size="medium"
    @submit.native.prevent>
    <div class="static-content-item-head center">
      <div class="static-content-item">
        <div>姓名：</div>
        <!-- 使用 patientInfo 中的数据 -->
        <div v-if="patientInfo.patientName">{{ patientInfo.patientName }}</div>
      </div>
      <div class="static-content-item">
        <div>性别：</div>
        <!-- 使用 patientInfo 中的数据 -->
        <div v-if="patientInfo.gender">{{ patientInfo.gender == 0 ? '女' : '男' }}</div>
      </div>
      <div class="static-content-item">
        <div>科室：</div>
        <!-- 使用 patientInfo 中的数据 -->
        <div v-if="patientInfo.department">{{ patientInfo.department }}</div>
      </div>
      <div class="static-content-item">
        <div>床号：</div>
        <!-- 使用 patientInfo 中的数据 -->
        <div v-if="patientInfo.bedNum">{{ patientInfo.bedNum }}</div>
      </div>
      <div class="static-content-item">
        <div>病案号：</div>
        <!-- 使用 patientInfo 中的数据 -->
        <div v-if="patientInfo.admissionNum">{{ patientInfo.admissionNum }}</div>
      </div>
    </div>
    <div class="center">
      <el-divider direction="horizontal"></el-divider>
    </div>
    <div>
      <div class="record-title">高压氧治疗的心理护理及安全告知书</div>
    </div>
    <div class="center">
      <el-form-item label="门诊" prop="isOutpatient" class="float-right custom-font-size" label-width="50px">
        <el-radio-group v-model="formData.isOutpatient">
          <el-radio v-for="(item, index) in isOutpatientOptions" :key="index" :label="item.value"
            :disabled="item.disabled" style="display: inline">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </div>
    <div class="instructions center">
      <p style="margin-bottom:30px ;">尊敬的患者（或家属）：</p>
      <p style="text-indent: 2em;">根据病情和治疗的需要，为了您能顺利完成治疗，确保安全，进入高压氧舱治疗前，请您认真仔细阅读以下内容并认真执行。</p>
      <ol>
        <li>熟悉环境，了解高压氧环境中可能出现的不适反应和防治方法，消除紧张心理，积极配合治疗。</li>
        <li>入舱前排空大小便，以确保治疗能按时完成。</li>
        <li>严禁将火柴、打火机、收音机、助听器、手机、手表、饰品等可能引起火花的物品带入舱内。自己的衣裤，女性的胸罩、卫生巾、发胶、口红、指甲油等化妆品，有创口的油性敷料一律不准带入舱内。</li>
        <li>学会正确的捏鼻子鼓气、吞咽咀嚼等动作保持咽鼓管通畅以防耳不适。</li>
        <li>稳压过程中遇不适及时与舱外医务人员沟通，听从医务人员的指导，配合医务人员进行相应处理。</li>
        <li>减压过程中不要憋气，保持正常呼吸，此过程舱内温度会有所下降，要注意保暖。</li>
        <li>出舱后有任何不适及时告知医务人员。</li>
        <li>为确保医疗安全，出现以下情况可能终止治疗，并提早出舱，敬请谅解：生命体征不稳定、烦躁不安、耳痛不适应、舱内大小便不能控制或其他紧急情况。</li>
        <li>高压氧治疗吸氧装置请保持清洁、干燥，单人专用，患者自行保管。</li>
        <li>急诊病人（急诊病房、急诊抢救室、急诊监护室）高压氧治疗结束后必须由急诊室工人或医护人员护送才能返回急诊室。</li>
      </ol>
    </div>
    <div class="static-content-item-head center ">
      <div class="footer p-20">
        <div style="width: 200px;">谈话人员签名：</div>
        <input type="text" name="" id="" placeholder="请输入" style="text-align: left;" v-model="formData.talkerSignature">
      </div>
      <div class="footer p-20">
        <div style="width: 125px;">签字日期：</div>
        <el-date-picker v-model="formData.talkerSignatureTime" type="datetime" placeholder="请选择日期和时间" v-if="formType == 'edit'"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
        <input type="text" name="" id="" placeholder="请输入" style="text-align: left;" v-if="formType == 'view'"
          v-model="formData.talkerSignatureTime">
      </div>
    </div>
    <div class="static-content-item-head center ">
      <div class="footer p-20">
        <div style="width: 200px;">患者签名：</div>
        <input type="text" name="" id="" placeholder="请输入" style="text-align: left;"
          v-model="formData.patientSignature">
      </div>
      <div class="footer p-20">
        <div style="width: 125px;">签字日期：</div>
        <el-date-picker  v-if="formType == 'edit'" v-model="formData.patientSignatureTime" type="datetime" placeholder="请选择日期和时间"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
        <input type="text" v-if="formType == 'view'" name="" id="" placeholder="请输入" style="text-align: left;"
          v-model="formData.patientSignatureTime">
      </div>
    </div>
    <p class="center" style="text-indent: 2em; font-size: 18px;margin-bottom: 20px;">如果患者无法签署告知书，请其授权的代理人在此签名。</p>
    <div class="static-content-item-head center ">
      <div class="footer p-20">
        <div style="width: 200px;">代理人签名：</div>
        <input type="text" name="" id="" placeholder="请输入" style="text-align: left;" v-model="formData.agentSignature">
      </div>
      <div class="footer p-20">
        <div style="width: 185px;">与患者的关系：</div>
        <input type="text" name="" id="" placeholder="请输入" style="text-align: left;" v-model="formData.agentRelation">
      </div>
    </div>
  </el-form>

</template>

<script>

const initDefaultForm = () => {
  return {
    patientName: "",
    bedNum: "",
    admissionNum: "",
    sickRegion: "",
    isOutpatient: "",
    talkerSignature: "",
    talkerSignatureTime: "",
    patientSignature: "",
    patientSignatureTime: "",
    agentSignature: "",
    agentRelation: "",
    showInput: true // 控制输入框显示
  };
};

export default {
  components: {},
  props: {
    formType: {
      type: String,
      default: 'template' // 表单类型：template：模板，edit：评估，view：详情
    },
    patientInfo: {
      type: Object,
      default: () => ({}) // 患者信息
    },
    doctorType: {
      type: String,
      default: 'hospital' // 医生类型：hospital：住院医生，outpatient：门诊医生，therapists：治疗师
    },
    assessInfo: {
      type: Object,
      default: () => ({}) // 评定表信息
    }
  },
  data() {
    return {
      rules: {},
      isOutpatientOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 2
      }],
      formData: initDefaultForm(),
    }
  },
  computed: {},
  watch: {
    assessInfo: function (val) {
            this.formData = Object.assign(initDefaultForm(), this.assessInfo)
        }
  },
  created() { },
  mounted() { },
  methods: {
    getFormData() {
      return new Promise((resolve, reject) => {
        resolve({
          ...this.formData
        })
      })
    },
    resetForm() {
      this.$refs['vForm'].resetFields()
    }
  }
}

</script>

<style lang="scss" scoped>
.center {
  width: 80%;
  margin: 0 auto;
}

.record-title {
  font-size: 27px;
  font-weight: bold;
  text-align: center;
  margin: 20px 0;
}

.static-content-title {
  font-size: 18px;
  text-align: center;
  margin: 15px 0;
}

.footer {
  min-height: 20px;
  display: flex;
  align-items: center;
  margin-right: 20px;
  margin-bottom: 20px;
  font-size: 18px;
}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;
  margin-right: 20px;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}

.static-content-item-head {
  min-height: 20px;
  font-size: 16px;
  display: flex;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}

::v-deep .el-divider--horizontal {
  margin: 0;
}

.float-right {
  float: right;
  width: 200px;
}

.custom-font-size {
  font-size: 16px;
}

.instructions {
  font-size: 18px;
  line-height: 1.6;
  padding: 20px;
  padding-top: 40px;
  border-radius: 5px;
}

.instructions p {
  margin-bottom: 10px;
}

.instructions ol {
  padding-left: 20px;
}

.instructions li {
  margin-bottom: 10px;
}

// 去除input样式
input {
  border: none;
  text-align: center;
  width: 100%;
}

input[type=text]:focus {
  outline: none;
}
</style>
